<script setup>
import {useRouter} from "vue-router";

const props = defineProps({
    data: {
        type: Object,
        required: true
    }
})
const router = useRouter()
</script>

<template>
    <div class="w-72 h-[380px] mt-8
                 bg-white shadow-gray-300 shadow rounded-2xl overflow-hidden" >
        <div class="w-full">
            <img :src="data.bgimg === '' ? '../../assets/default-bg.png' : data.bgimg"
                 alt="背景图"
                 style="width: 100%;height: 160px;object-fit: cover">
        </div>
        <p class="text-center mt-2" style="font-size: 17px;">{{ data.title }}</p>
        <p class="w-72 h-16 whitespace-normal px-5 text-gray-500 text-center overflow-hidden">{{ data.description }}</p>
        <div class="w-full px-5"><a-divider/></div>
        <div class="flex w-full">
            <div class="w-1/2">
                <p class="font-bold text-lg text-center">{{ data.templateNum }}</p>
                <p class=" text-center">引用数量</p>
            </div>
            <a-divider direction="vertical"/>
            <div class="w-1/2" >
                <div @click="router.push('/preview/'+data.id)"
                     class="w-[56px] p-[5px] rounded mx-auto cursor-pointer hover:bg-blue-200">
                    <img class="mx-auto block " src="../../assets/icon_preview.svg" style="width: 36px;height: 36px;"/>
                    <p class="text-center">预览</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>